<template>
  <div class="info-page">
    <form @submit="save">
      <van-cell-group title="基础信息">
        <van-cell title="头像" class="van-cell--avatar">
          <button class="avatar-img-wrap" open-type="chooseAvatar" @chooseavatar="setAvatar">
            <img :key="form.avatar" class="avatar-img" :src="form.avatar">
          </button>
        </van-cell>
        <van-field v-model="form.nickname" name="nickname" label="用户名" type="nickname" placeholder="请输入" />
        <picker :range="sexOptions" @change="onSexChange">
          <van-field :value="form.sex" name="sex" label="性别" placeholder="请选择" right-icon="arrow" readonly />
        </picker>
        <van-field v-model="form.height" name="height" label="身高(cm)" type="number" placeholder="请输入" />
        <van-field v-model="form.weight" name="weight" label="体重(kg)" type="digit" placeholder="请输入" />
        <van-field v-model="bmi" name="bmi" label="BMI(仅显示)" placeholder="根据身高体重自动计算" readonly />
        <van-field v-model="form.mobile" name="mobile" label="电话" type="number" placeholder="请输入" />
        <picker mode="date" @change="onDateChange">
          <van-field v-model="form.birthday" name="birthday" label="生日" placeholder="请选择" right-icon="arrow" readonly />
        </picker>
        <van-field v-model="form.chrdse" name="chrdse" label="慢性病" placeholder="请输入" />
      </van-cell-group>
      <van-cell-group title="复用药物">
        <template #title>
          <div class="custom-group-title">
            <span>复用药物</span>
            <van-button size="mini" icon="plus" type="primary" @click="addDrug" />
          </div>
        </template>
        <van-swipe-cell v-for="(drug, index) in form.drugs" :key="index" class="drug-group" :right-width="60">
          <span class="drug-group__index">{{ index + 1 }}.</span>
          <div class="drug-group__content">
            <van-field v-model="drug.name" label="药名" placeholder="请输入" />
            <van-field v-model="drug.count" label="用药频率/剂量" type="number" placeholder="请输入" />
          </div>
          <template #right>
            <van-button type="danger" @click="removeDrug(index)">删除</van-button>
          </template>
        </van-swipe-cell>
      </van-cell-group>
      <van-cell-group title="认知功能">
        <van-field v-model="form.mmse" name="mmse" label="MMSE" type="digit" placeholder="请输入" />
        <van-field v-model="form.moca" name="moca" label="MOCA" type="digit" placeholder="请输入" />
      </van-cell-group>
      <van-cell-group title="情绪状态">
        <van-field v-model="form.gds" name="gds" label="GDS" type="digit" placeholder="请输入" />
        <van-field v-model="form.sas" name="sas" label="SAS" type="digit" placeholder="请输入" />
      </van-cell-group>

      <fixed-bottom text="保存" native-type="submit" />
    </form>
  </div>
</template>

<script>
import { CellGroup, Cell, Button } from 'vant'
import VanField from '@/components/VanField'
import SwipeCell from './components/SwipeCell.jsx'
import FixedBottom from '@/components/FixedBottom'
import { updateUser } from './api'
import { cloneDeep } from 'lodash-es'
import { mapGetters } from 'vuex'
import { uploadFile } from '@/api'

export default {
  components: {
    FixedBottom,
    VanField,
    [Button.name]: Button,
    [Cell.name]: Cell,
    VanSwipeCell: SwipeCell,
    [CellGroup.name]: CellGroup
  },
  data() {
    return {
      sexOptions: [
        '男',
        '女'
      ],
      form: {
        value: '',
        drugs: [
          { name: '', count: '' },
          { name: '', count: '' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['user']),
    bmi() {
      if (this.form.weight && this.form.height) {
        const temp = (this.form.height / 100)
        return (this.form.weight / temp / temp).toFixed(2)
      }
      return ''
    }
  },
  onLoad() {
    this.form = cloneDeep(this.user)
  },
  methods: {
    async setAvatar(e) {
      const { avatarUrl } = e.detail
      if (avatarUrl) {
        const [url] = await uploadFile(avatarUrl)
        this.form.avatar = url
      }
      console.log(e, 'avatar')
    },
    save(e) {
      if (e.detail.value.nickname) {
        this.form.nickname = e.detail.value.nickname
      }
      if (!this.form.nickname) {
        this.showMsg('用户名不能为空')
        return
      }
      this.form.bmi = this.bmi
      updateUser(this.form).then(res => {
        this.showMsg('保存成功', 'success')
        this.$store.commit('setUser', cloneDeep(this.form))
      })
    },
    addDrug() {
      this.form.drugs.push({
        name: '',
        count: ''
      })
    },
    removeDrug(index) {
      this.form.drugs.splice(index, 1)
    },
    onSexChange(e) {
      this.form.sex = this.sexOptions[e.detail.value]
    },
    onDateChange(e) {
      this.form.birthday = e.detail.value
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
